<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        <!-- <div id="blog-post-demo" class="demo">
            <blog-post title="My journey with Vue"></blog-post>
            <blog-post title="Blogging with Vue"></blog-post>
            <blog-post title="Why Vue is so fun"></blog-post>
        </div> -->

        <div id="blog-posts-demo">
            <blog-post v-for="post in posts" :key="post.id" :title="post.title"></blog-post>
        </div>
    </div>

    <script>
        // const app = Vue.createApp({})
        // app.component('blog-post', {
        //     props: ['title'],
        //     template: `<h4>{{ title }}</h4>`
        // })
        // app.mount('#blog-post-demo')

        const App = {
            data() {
                return {
                    posts: [
                        { id: 1, title: 'My journey with Vue' },
                        { id: 2, title: 'Blogging with Vue' },
                        { id: 3, title: 'Why Vue is so fun' }
                    ]
                }
            }
        }

        const app = Vue.createApp(App)

        // 定义全局子组件
        app.component('blog-post', {
            props: ['title'],
            template: `<h4>{{ title }}</h4>`
        })

        app.mount('#blog-posts-demo')
    </script>
</body>

</html>